<template>
    <div>
        <div class="tx-img-box position-r">             
            <!-- 相册轮播 -->
            <div class="bj-black"></div>
            <van-swipe v-if="photoArr!=''">
                <van-swipe-item v-for="(image, index) in photoArr" :key="index">
                    <video v-if="photoArr[index].file.url.indexOf('mp4')>0" :src="$imgPath(photoArr[index].file.url)" controls="controls" style="width: 16rem;
    height: 10rem;"></video>
                    <img v-else :src="$imgPath(photoArr[index].file.url)" alt="">
                </van-swipe-item>
            </van-swipe>
            <!-- 默认相册图片   isShare = true-->           
            <img src="../assets/image/center/userphoto.jpg" alt="" v-else>            
            <img class="center-jt" src="../assets/image/center/jtb.png" alt="" @click="$router.back(-1)">
            <img class="center-fx" src="../assets/image/center/fxb.png" alt="" @click="iosWxShare()">
            <div class="center-ranking1" v-if="isShow" @click="popular()">
                <img class="popularity" :src="$imgPath(paihangObj.headImg)" alt="">
                <img class="center-ranking-top" src="../assets/image/center/img_crown.png" alt="">
                <span>人气榜</span> 
                <img class="center-ranking-bot" src="../assets/image/center/ranking_1.png" alt="">                              
            </div>
            <div class="center-ranking2" v-if="isShow" @click="rich()">
                <img class="rich" :src="$imgPath(paihangObj.headImg)" alt="">
                <img class="center-ranking-top" src="../assets/image/center/img_crown.png" alt="">
                <span>富豪榜</span> 
                <img class="center-ranking-bot" src="../assets/image/center/ranking_1.png" alt="">                              
            </div>            
            <img class="center-ranking3" src="../assets/image/center/icon_arrow.png" alt="" >                             
        </div>
        <ul class="background-fff clearfix center-ul">
            <li class="center-ul-li">
                <span class="center-name fl font-28">{{userobj.nickname}}
                </span>
                <p v-if="isMe == false" class="lh-jb" @click="jubao(1)">拉黑</p>
                <p v-if="isMe == false" class="lh-jb" @click="jubao(2)">举报</p>
                <em class="center-vip fl text-align-c" v-if="userobj.type==1">VIP</em>
                <router-link tag="span" :to="{ name: 'editorData'}" class="center-bj fr font-28" v-if="active == 0&&isMe">
                    <img src="../assets/image/center/center_bj.png" class="fl" alt="">
                    编辑
                </router-link>
                
               <!--  <img id="liWu-img" src="../assets/image/center/icon_reward.png" alt="" v-else> -->
            </li>
            <li class="center-ul-li">
                <img class="age-icon" src="../assets/image/index/img_female.png" alt="" v-if="userobj.sex==2">
                <img class="age-icon" src="../assets/image/index/img_male.png" alt="" v-if="userobj.sex==1">
                <img class="age-icon" src="../assets/image/icon_unknown.png" alt="" v-if="userobj.sex==0">
                <span class="margin-r">{{userobj.age}}</span>
                <span>{{userobj.city}}</span>
                <span>|</span>               
                <span v-if="userobj.onlineStatus==0">在线</span>
                <span v-else>离线</span>
            </li>
            <li class="center-ul-li uid">
                UID:{{userobj.code}}
            </li>
            <li class="center-ul-li">
               {{userobj.signature}}
            </li>
        </ul>
        <div class="bj-color"></div>
        <div class="center-tab-box background-fff clearfix">
            <div class="center-tab">
                <span class="fl color-6" :class="[index == active ? 'active' : '']" v-for="(item,index) in tabArr" :key="index"  @click="tabClick(index)">{{item}}</span>
            </div>
            <!-- <serivce-child v-if="active == 0" :is-me="isMe" :userId="userId" :userobj="userobj"></serivce-child> -->
            <!-- <dynamic-child v-else-if="active == 1"></dynamic-child> -->
            <data-child :userobj="userobj" :is-me="isMe"></data-child>
        </div>
        <van-tabbar>
            <div v-if="isMe" class="ta1">
                <span class="fabu-dynamic text-align-c" @click="sqService()" v-if="active==0">申请服务</span> 
                <span class="fabu-dynamic text-align-c"  @click="editData()" v-if="active==1">编辑资料</span>  
           </div>                
            <div v-else class="ta2">
                <span class="fl doalogue2 text-align-c" @click="chatLink()">对话</span>
                <span class="fr attention2 text-align-c" @click="dropAtt()" v-if="isAtten">取消关注</span>
                <span class="fr attention2 text-align-c" @click="addAtt()" v-else>关注</span>                
            </div>                        
        </van-tabbar>
        <!-- 分享弹框 -->
        <van-popup v-model="isShare" position="bottom" :overlay="true">
            <share></share>
        </van-popup>
    </div>
</template>
<script>
import share from '@/components/common/share'
import serviceChild from '@/components/centerChild/service'
import dynamicChild from '@/components/centerChild/dynamic'
import dataChild from '@/components/centerChild/data'
import apiHttp from '../api/index'
import { details } from '../router/detail';
import { Toast } from 'vant';
export default {
    data(){
        return{
            isShare:false,
            tabArr:['资料'],     // '动态'['服务','资料']
            active:0,
            userobj:{},
            userId:this.$route.query.userId,           
            isMe:true,
            isShow:false,
            paihangObj:{},
            photoArr:[],
            uId:"",
            isAtten:false,   //是否关注过
            locationHref:window.location.href,
            iosTrue:this.$store.state.iosTrue,   //this.$store.state.iosTrue
        }
    },
    created(){           
        this.getUserImg();      
        this.getUserCredit();
        this.meIndexList();
        if(this.userId==''||this.userId==null||this.userId==undefined){
             this.userId = '';
        }else{
            this.getIsAtten(); 
        }                                
    },
    methods:{
        jubao(type){
            if(type == 1){
                Toast.success('拉黑成功')
            }else{
                Toast.success('举报成功')
            }
        },
        //分享(报错)
        iosWxShare(){
            if(this.$store.state.iosTrue == true){
                let st = `${this.locationHref}|${this.userobj.nickname}的主页|${this.$imgPath(this.userobj.headImg)}`
                window.webkit.messageHandlers.wxShare.postMessage(st)
            }else{
                this.isShare = !this.isShare
            }
        },
        //我的主页榜单查询
        getUserCredit(){
            let that = this;
           let data = {
                userId:that.userId,
            }
            apiHttp.apiCenter.getUserCredit(data,resp=>{
                this.paihangObj = resp.data;
                if(resp.code==200){
                    //判断是他的，我的
                    if(that.userId !=""&&that.userId!=null&&that.userId!=undefined&&resp.data.userId==that.userId){
                       //判断他有没有设置财富榜隐私(他的)
                        if(this.paihangObj.fortunelisteStatus=='1'){
                            this.isShow = false;
                           //不显示排行榜榜单
                        }else{
                            //判断人气前十
                            if(this.paihangObj.popularityRanking<=10){                                
                                this.isShow = true;
                            }
                        }
                    }else{
                        //判断人气前十(我的)
                        if(this.paihangObj.popularityRanking<=10){                          
                            this.isShow = true;
                        }
                        //富豪榜
                        if(this.paihangObj.wealthRanking<=10){                           
                            this.isShow = true;
                        }
                    }
                }else {
                    //console.log(resp.message);
                }

            })
        },                
        meIndexList(){      //获取自己的主页个人信息
            apiHttp.apiCenter.detail('',resp=>{                        
                this.uId = resp.id;                             
                if(this.uId==this.userId||this.userId==null||this.userId==''||this.userId==undefined){
                    if(resp.headImg==null || resp.headImg==''){
                        resp.headImg = '/user/head/defaultHeadImage.png';
                    }
                    this.userobj = resp;                                                       
                    //获取自己的主页个人信息                                                 
                    this.isMe = true;
                }else{
                    //获取他的主页个人信息
                    let params = {
                        id:this.userId
                    } 
                    apiHttp.apiCenter.taDetail(this.userId,params,resp=>{ 
                        if(resp.headImg==null || resp.headImg==''){
                            resp.headImg = '/user/head/defaultHeadImage.png';
                        }                                                        
                            this.userobj = resp;                                             
                            this.isMe = false;                                                                                                                                     
                    })
                }                                                                         
            })
        },
        getUserImg(){      //获取用户相册信息
            if(this.userId==null||this.userId==''){
                apiHttp.apiCenter.getUserImgme('',resp=>{                                          
                    if(resp.code==200){
                        this.photoArr = resp.data.content;                                                        
                    }else{
                        Toast(resp.message);
                    }                            
                })
            }else{
                let params = {
                    userId:this.userId
                }
                apiHttp.apiCenter.getUserImgta(this.userId,params,resp=>{                                          
                    if(resp.code==200){
                        this.photoArr = resp.data.content;                                          
                    }else{
                        Toast(resp.message);
                    }                            
                })
            }                                    
        }, 
       tabClick(index){
           this.active = index
       },
       //跳转到人气榜页面
       popular(){
           this.$router.push({
               name:"foundList",
               query:{index:0}
           });
       },
       //跳转到富豪榜页面
       rich(){
           this.$router.push({
               name:"foundList",
               query:{index:1}
           });
       },
       //是否关注过接口
       getIsAtten(){
           let params = {
               objectId:this.userId
           }
           apiHttp.apiCenter.isAttention(this.userId,params,resp=>{             
               if(resp.code==200){
                    this.isAtten = resp.data; 
               }else{
                   Toast(message)
               }
           })
       },
       //用户添加关注
        addAtt(){
            let params = {
                objectId:this.userId
            }
            apiHttp.apiCenter.addAttention(params,resp=>{               
               if(resp.code==200){
                   this.isAtten = true;
                   // this.$emit("attenEvent",true);
                    Toast("已关注");
                }else{
                   Toast(message)
                }
            })
        },
        //用户取消关注
        dropAtt(){
            let params = {
                objectId:this.userId
            }
            apiHttp.apiCenter.dropAttention(this.userId,params,resp=>{
                if(resp.code==200){
                    this.isAtten = false;                   
                    //this.$emit("attenEvent",false);
                    Toast("已取消关注");
                }else{
                   Toast(message)
                }
            })
        },
        // 点击对话跳转
        chatLink(){
            this.$router.push({
                name:'chat',
                query:{
                    to_code:this.userobj.code,
                    to_username:this.userobj.nickname,
                    to_userId:this.userobj.id,
                    to_headImg:this.userobj.headImg
                }
            })
        },
        editData(){
            this.$router.push({
                name:'editorData'
            })
        },
        //
        sqService(){
            this.$router.push({
                name:'service'
            })
        }   
    },
    components: {
        "serivce-child":serviceChild,
        "dynamic-child":dynamicChild,
        "data-child":dataChild,
        share
    }
}
</script>

<style scoped>
.lh-jb{
    height: 1rem;
    line-height: 1rem;
    color: #000;
    width: 1.6rem;
    text-align: center;
    font-size: .6rem;
    display: inline-block;
    float: right;
}
/* 图片上的浮层 */
.bj-black{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.1;
}
/*  */
.bj-color{
    width: 100%;
    height: 0.4rem;
    background-color: #F6F6F6;
}
/* #liWu-img{
    float: right;
    width: 1.2rem;   
    margin-right: .1rem;
} */
.margin-r{
    margin-right: 0.5rem;
}
.age-icon{
  width: .6rem;
  margin-right: .1rem;
}
.tx-img-box{
    height: 10rem;
    overflow: hidden;
}
.center-jt{
    position: absolute;
    left: .6rem;
    top: .6rem;
    width: .8rem;
}
.center-fx{
    position: absolute;
    right: .6rem;
    top: .6rem;
    width: .8rem;
}
.center-ul{
    padding: .6rem;
}
.center-ul-li{
    height: 1.2rem;
    overflow: hidden;
    line-height: 1.2rem;
    font-size: .54rem;
}
.center-name{
    font-size: .7rem;
    font-weight: bold;
}
.center-vip{
    height: .6rem;
    line-height: .6rem;
    width: 1.3rem;
    display: inline-block;
    color: #ffffff;
    font-size: .4rem;
    background-color: #d84e4d;
    margin: .2rem 0 0 .4rem;
    overflow: hidden;
    border-radius: .6rem;
}
.center-bj{
    height: .7rem;
    width: auto;
    border: solid 0.04rem #d84f4d;
    padding: 0.1rem .3rem;
    border-radius: .46rem;
    line-height: .8rem;
    color: #d84f4d;
}
.center-bj img{
    width: .5rem;
    margin-top: .14rem;
    margin-right: .1rem;
}
.center-ul-li .sex{
    width: .6rem;
    margin-right: .2rem;
    margin-top: .1rem;
}
.uid{
    font-size: .4r8em;
    color: #999999;
}
.center-tab-box{
    padding: .6rem;
}
.center-tab{
    height: 1rem;
    margin-bottom: 0.6rem;
}
.center-tab span{
    height: 1rem;
    line-height: 1rem;
    margin-right: 1rem;
    border-bottom: #ffffff solid .04rem;
    display: inline-block;
    font-size: .6rem;
    font-weight: bold;
}
.active{
    color: #d84e4d;
    border-bottom: #d84e4d solid .08rem !important;
}
/* 人气榜和富豪榜图片样式 */
.center-ranking1{
    position: absolute;
    right: 4.6rem;
    bottom: 0.5rem;
    width: 2rem;
}
.center-ranking2{
    position: absolute;
    right: 1.8rem;
    bottom: 0.44rem;
    width: 2rem;
}
.center-ranking1>span{
    color: white;
    position: relative;     
    top:0.97rem;
    font-size: 0.4rem;
    z-index: 99;
    text-align: center;
    left: 0.2rem;
}
.center-ranking2>span{
    color: white;
    position: relative;     
    top:0.97rem;
    font-size: 0.4rem;
    z-index: 99;
    text-align: center;
    left: 0.22rem;
}
.center-ranking-bot{  
   position: relative;     
    top:0.3rem;   
}
.center-ranking-top{  
   position: relative;     
    top:1.4rem; 
    left: 0.1rem;  
}
.center-ranking3{
    position: absolute;
    right: 0.5rem;
    bottom: 1.1rem;
    width: 0.5rem;
}
.popularity{
    position: absolute;
    left: 0.22rem;
    bottom: 0.38rem;
    width: 1.69rem;
    height: 1.72rem;
    z-index: 99;
    border-radius: 50%;
}
.rich{
    position: absolute;
    left: 0.19rem;
    top: 1.73rem;
    width: 1.69rem;
    height: 1.69rem;
    z-index: 99;
    border-radius: 50%;
}
.van-swipe-item{
    background-color: #ccc;
}
/* 底部申请服务和编辑资料按钮的样式 */
.ta1{    
    font-size: .58rem;
    display: block;
    width: 100%;
}
/* 底部对话和关注按钮的样式 */
.ta2{    
    font-size: .58rem;
    display: block;
    width: 100%;
}
.doalogue2{
    height: 1.3rem;
    line-height: 1.3rem;
    width: 44%;  
    background-color: #FFFFFF;  
    color: #D84E4D; 
    border-radius: 1rem; 
    border: 0.04rem solid  #D84E4D;  
}
.attention2{
    height: 1.4rem;
    line-height: 1.4rem;   
    width: 44%;  
    background-color: #D84E4D;   
    color: #fff; 
    border-radius: 1rem;    
}
</style>

